<template>
  <div class="examAnalysis tapStyle">
    <div class="toolbox">
      <div class="toolbox-row">
        <span>时间选择 : </span>
        <div class="layoutBox" style="width:242px">
              <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>&emsp;&emsp;
        <!--<span>断面编码或名称 : </span>
        <div class="layoutBox" style="width:150px">
          <el-input v-model="sectionName" placeholder="请输入"></el-input>
        </div>&emsp;
        <span>所属行政区 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
        <span>所属流域 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;-->
         <el-button @click=""><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <!--<div class="toolbox-row">
        <span>是否验收 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
        <span>包&emsp;&emsp;件 : </span>
        <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
        </div>&emsp;&emsp;
      </div>-->
    </div>
    <div class="containerbox">
      <yf-tabs type="border-card" v-model="tabsValue" @tab-click="toggleTab">
        <yf-tab-pane name="DAY_QUALITY" label="日质控">
          <div class="tablebox" style="height: 100%">
            <el-table
            :data="dailyQualityTable"
            border
            height="100%">
            <el-table-column
              type="index"
              fixed
              label="序号">
            </el-table-column>
            <el-table-column
              prop="areaName"
              fixed
              width="130"
              label="行政区">
            </el-table-column>
            <el-table-column
              prop="basinName"
              fixed
              width="130"
              label="流域">
            </el-table-column>
            <el-table-column
              prop="stationName"
              fixed
              width="110"
              label="断面名称">
            </el-table-column>
            <el-table-column label="24小时零点漂移">
              <el-table-column  v-for="(item,index) in dailyTableHead" :key="index" :label="item.name">
                <el-table-column
                  :prop="'zero_'+ item.itemCode+'_count'"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  :prop="'zero_'+ item.itemCode+'_qualified'"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  :prop="'zero_'+ item.itemCode+'_qualifiedRate'"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <!--<el-table-column  label="氨氮">
                <el-table-column
                  prop="adReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="adQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="adRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="zlQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="zlRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>-->
            </el-table-column>
            <el-table-column
              prop="subTime"
              width="160"
              label="24小时跨度漂移">
              <el-table-column  v-for="(item,index) in dailyTableHead" :key="index" :label="item.name">
                <el-table-column
                  :prop="'span_'+ item.itemCode+'_count'"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  :prop="'span_'+ item.itemCode+'_qualified'"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  :prop="'span_'+ item.itemCode+'_qualifiedRate'"
                  label="合格率">
                </el-table-column>
              </el-table-column>
             <!-- <el-table-column  label="氨氮">
                <el-table-column
                  prop="adRealK"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="adQualifiedK"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="adRateK"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlRealK"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="zlQualifiedK"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="zlRateK"
                  label="合格率">
                </el-table-column>
              </el-table-column>-->
            </el-table-column>

          </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane name="FIVE_PARAM" label="常规五参数周核查">
          <div class="tablebox" style="height: 100%">
            <el-table
            :data="fiveTableData"
            border
            height = "100%">
            <el-table-column
              type="index"
              fixed
              label="序号">
            </el-table-column>
            <el-table-column
              prop="area"
              fixed
              width="130"
              label="行政区">
            </el-table-column>
            <el-table-column
              prop="basin"
              fixed
              width="130"
              label="流域">
            </el-table-column>
            <el-table-column
              prop="sectionName"
              fixed
              width="110"
              label="断面名称">
            </el-table-column>
            <el-table-column label="水温">
              <el-table-column
                prop="swReal"
                label="实传数量">
              </el-table-column>
              <el-table-column
                prop="swQualified"
                label="合格数量">
              </el-table-column>
              <el-table-column
                prop="swRate"
                label="合格率">
              </el-table-column>
            </el-table-column>
            <el-table-column label="pH">
              <el-table-column
                prop="phReal"
                label="实传数量">
              </el-table-column>
              <el-table-column
                prop="phQualified"
                label="合格数量">
              </el-table-column>
              <el-table-column
                prop="phRate"
                label="合格率">
              </el-table-column>
            </el-table-column>
            <el-table-column label="溶解氧">
              <el-table-column
                prop="rjyReal"
                label="实传数量">
              </el-table-column>
              <el-table-column
                prop="rjyQualified"
                label="合格数量">
              </el-table-column>
              <el-table-column
                prop="rjyRate"
                label="合格率">
              </el-table-column>
            </el-table-column>
            <el-table-column label="电导率">
              <el-table-column
                prop="ddvReal"
                label="实传数量">
              </el-table-column>
              <el-table-column
                prop="ddvQualified"
                label="合格数量">
              </el-table-column>
              <el-table-column
                prop="ddvRate"
                label="合格率">
              </el-table-column>
            </el-table-column>
            <el-table-column label="浊度">
              <el-table-column
                prop="zdReal"
                label="实传数量">
              </el-table-column>
              <el-table-column
                prop="zdQualified"
                label="合格数量">
              </el-table-column>
              <el-table-column
                prop="zdRate"
                label="合格率">
              </el-table-column>
            </el-table-column>
          </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane name="MULTIPOINT_LINEARITY" label="多点线性核查">
          <div class="tablebox" style="height: 100%">
            <el-table
              :yfdata="tableData"
              height="100%"
              border>
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="area"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="sectionName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column  label="高锰酸盐">
                <el-table-column
                  prop="gmsyReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="gmsyQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="gmsyRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="氨氮">
                <el-table-column
                  prop="adReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="adQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="adRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="zlQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="zlRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总氮">
                <el-table-column
                  prop="zdReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="zdQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="zdRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane name="INTEGRATED_INTERVENTION" label="集成干预检查">
          <div class="tablebox" style="height: 100%">
            <el-table
              :yfdata="tableData"
              height="100%"
              border>
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="area"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="sectionName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column  label="高锰酸盐">
                <el-table-column
                  prop="gmsyReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="gmsyQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="gmsyRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="氨氮">
                <el-table-column
                  prop="adReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="adQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="adRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="zlQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="zlRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane name="REAL_WATER_SAMPLE_COMPARISON" label="实际水样对比">
          <div class="tablebox" style="height: 100%">
            <el-table
              :data="tableData"
              border
              height="100%">
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="area"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basin"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="sectionName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column label="水温">
                <el-table-column
                  prop="swReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="swQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="swRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="pH">
                <el-table-column
                  prop="phReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="phQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="phRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="溶解氧">
                <el-table-column
                  prop="rjyReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="rjyQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="rjyRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="电导率">
                <el-table-column
                  prop="ddvReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="ddvQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="ddvRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column label="浊度">
                <el-table-column
                  prop="zdReal"
                  label="实传数量">
                </el-table-column>
                <el-table-column
                  prop="zdQualified"
                  label="合格数量">
                </el-table-column>
                <el-table-column
                  prop="zdRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </yf-tab-pane>
        <yf-tab-pane name="RECOVERY" label="加标回收率">
          <div class="tablebox" style="height: 100%">
            <el-table
              :data="recoveryRateTable"
              height="100%"
              border>
              <el-table-column
                type="index"
                fixed
                label="序号">
              </el-table-column>
              <el-table-column
                prop="areaName"
                fixed
                width="130"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="basinName"
                fixed
                width="130"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="stationName"
                fixed
                width="110"
                label="断面名称">
              </el-table-column>
              <el-table-column  :label="item.name" v-for="(item,index) in dailyTableHead" :key="index">
                <el-table-column
                  :prop="item.itemCode + '_count'"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  :prop="item.itemCode + '_qualified'"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  :prop="item.itemCode + '_qualifiedRate'"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <!--<el-table-column  label="氨氮">
                <el-table-column
                  prop="adReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="adQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="adRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总磷">
                <el-table-column
                  prop="zlReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="zlQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="zlRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>
              <el-table-column  label="总氮">
                <el-table-column
                  prop="zdReal"
                  label="实测组数">
                </el-table-column>
                <el-table-column
                  prop="zdQualified"
                  label="合格组数">
                </el-table-column>
                <el-table-column
                  prop="zdRate"
                  label="合格率">
                </el-table-column>
              </el-table-column>-->
            </el-table>
          </div>
        </yf-tab-pane>
      </yf-tabs>

    </div>

  </div>
</template>

<script>
export default {
  name: "examAnalysis",
  data() {
    return {
      dateRange: "", //时间选择
      sectionName: "", //断面名称
      value: "",
      stationId:'',
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      tableData: [{}],
      dailyQualityTable:[],
      fiveTableData:[],
      recoveryRateTable:[],
      projectSet: false,
      dialogData: [{
        monitoringItems: "高锰酸钾",
        waterQuality: "",
        spanValue: "",
        zeroPoint: "",
        span: ""
      },{
        monitoringItems: "氨氮",
        waterQuality: "",
        spanValue: "",
        zeroPoint: "",
        span: ""
      },{
        monitoringItems: "总磷",
        waterQuality: "",
        spanValue: "",
        zeroPoint: "",
        span: ""
      },{
        monitoringItems: "总氮",
        waterQuality: "",
        spanValue: "",
        zeroPoint: "",
        span: ""
      }],
      dailyTableHead:[{
        name:"高锰酸盐",
        itemCode:'w01019',
        prop:'acidSalt'
      },{
        name:"氨氮",
        itemCode:'w21003',
        prop:'ammonia'
      },{
        name:"总磷",
        itemCode:'w21011',
        prop:'phosphorus'
      },{
        name:"总氮",
        itemCode:'w21001',
        prop:'nitrogen'
      }],
      tabsValue:'DAY_QUALITY',
    };
  },
  computed: {
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  methods: {
    toggleTab(val) {
      this.getQualityControllerData();
    },
    getQualityControllerData(){
      this.$http.get("/Quality/qualityAnalysis/qualityControllerData", {
          params: {
            startTime: this.dateRange[0].format('yyyy-MM-dd'),
            endTime: this.dateRange[1].format('yyyy-MM-dd'),
            stationCodes: this.stationId, //this.stationId
            qualityAnalysisType: this.tabsValue,
          }
        }).then(res => {
          if (res.data.code === 0) {
            switch (this.tabsValue) {
              case 'DAY_QUALITY':
                this.dailyQualityTable = res.data.content.dataList;
                break;
              case 'FIVE_PARAM':
                this.fiveTableData = res.data.content.dataList;
                break;
              case 'MULTIPOINT_LINEARITY':
                this.dailyQualityTable = res.data.content.dataList;
                break;
              case 'INTEGRATED_INTERVENTION':
                this.dailyQualityTable = res.data.content.dataList;
                break;
              case 'REAL_WATER_SAMPLE_COMPARISON':
                this.dailyQualityTable = res.data.content.dataList;
                break;
              case 'RECOVERY':
                this.recoveryRateTable = res.data.content.dataList;
                break;
            }
          }
        }).catch(error => {});
    }
  },
  created() {
    this.$store.commit("setShowlefttree", true);
    let startTime = new Date().setDate(new Date().getDate() - 90);
    let endTime = new Date();
    this.dateRange = [ new Date(startTime), endTime];
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        let list = [];
        value.forEach((item)=>{
          list.push(item.nodeId);
        });
        this.stationId = list.join(',');
        this.getQualityControllerData();
      }
    }
  }
};
</script>

<style scoped lang="less">
.examAnalysis {
  height: calc(100% - 30px);
  .containerbox {
    padding: 6px 12px;
    height: calc(100% - 6px);

  }
}
.editInput {
  width: 50px;
  border: none;
  outline: none;
}
.toolbox-row {
  margin-bottom: 6px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
